
<html>
<head>
<title>Мои друзья</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://vkontakte.net.ru/canvas.js"></script> 
<link rel="stylesheet" href="http://vkontakte.net.ru/style.css" type="text/css" />

</head>

<BODY onload="init();">
<h1 style="{position:absolute; top:0px; left:0px; width:1200px;}" id="my_name" align=center> </h1>
<div width=1200px height=60px> &nbsp; </div>
<div style="{position:absolute; top:30px; left:0px;}"><a class='top' href="javascript:void('')" onclick="show_group(0);">Карта друзей</a></div> 
<div style="{position:absolute; top:30px; left:110px;}"><a class='top' href="javascript:void('')" onclick="show_group(1);">Статистика</a></div>
<div style="{position:absolute; top:30px; left:210px;}"><a class='top' href="javascript:void('')" onclick="show_group(2);">Код для вставки в блог</a></div>
<div style="{position:absolute; top:30px; left:380px;}"><a class='top' href="javascript:void('')" onclick="show_group(3);">Группы</a></div>
<div style="{position:absolute; top:30px; left:455px;}"><a class='top' href="javascript:void('')" onclick="show_group(4);">Интересы</a></div>
<div style="{position:absolute; top:30px; left:545px;}"><a class='top' href="javascript:void('')" onclick="show_group(5);">Страницы друзей</a></div>
<div style="{position:absolute; top:30px; left:680px;}"><a class='top' target="_top" href="http://vkontakte.net.ru">На главную страницу</a></div>
<!--	<img src="result.png" /> -->
<SCRIPT type="text/javascript">
var persons;
var my_name;
function init() {
       document.getElementById('my_name').innerHTML=my_name;	
	for (idn in persons) {
		person=persons[idn];
		if (person!='dummy') {
			newDiv=document.createElement("div");
			var st=newDiv.style;
			st.position='absolute';
			st.left=person.right==0 ? person.x : person.x-80;
			st.visibility='visible';			
			st.top=person.y+15;
			newDiv.innerHTML='<a onmouseover=\"show(\''+person.idnum+
				'\');\" onmouseout=\"hide(\''+person.idnum+
				'\');\" id=\'p'+person.idnum+'\' href=\"http://vkontakte.ru/profile.php?id='+
				person.idnum+'\">'+
				person.name+' ('+person.friends_ids.length+')</a>';
			document.getElementById('group0').appendChild(newDiv);
		}
	}
	ieCanvasInit(); 
}

function show_group(num) {
	for (var i=0; i<6; i++) {
		document.getElementById('group'+i).style.display='none';
	}
	document.getElementById('group'+num).style.display='block';
}

function Person(name,idnum,x,y,right,friends_ids) {
	this.name=name;
	this.idnum=idnum;
	this.friends_ids=friends_ids;
	this.x=x;
	this.y=y;
	this.right=right;
}
function draw(ctx,idnum,textcolor) {
	document.getElementById('p'+idnum).style.color=textcolor;
	var sel=persons[idnum];
	var prs_id='';
	var pers;
	ctx.beginPath();
	ctx.arc(sel.x, sel.y, 2, 0, Math.PI*2, true);
	for (var i=0; i<sel.friends_ids.length; i++) {
		prs_id=sel.friends_ids[i];
		pers=persons[prs_id];
		document.getElementById('p'+prs_id).style.color=textcolor;
		ctx.moveTo(sel.x,sel.y);
		ctx.lineTo(pers.x,pers.y);
		ctx.arc(pers.x, pers.y, 2, 0, Math.PI*2, true);

	}	
	ctx.moveTo(sel.x,sel.y);
	ctx.closePath();
	ctx.stroke();
}
function show(idnum) {
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	ctx.strokeStyle='#0000ff';
	draw(ctx,idnum,'#ff0000');
}
function hide(idnum) {
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = 'white';
	ctx.fillRect(0, 50, 1200, 1200);
	ctx.strokeStyle='white';
	draw(ctx,idnum,'#2b587a');
}



